<template>
  <!-- 发布消息对话框 -->
  <el-dialog title="发布消息" :model-value="publishDialog.visible" @update:model-value="(val) => emit('update:publishDialog', { ...publishDialog, visible: val })" width="800px" append-to-body>
    <el-form label-width="120px">
      <el-form-item label="目标主题">
        <el-input v-model="publishForm.topicName" placeholder="请输入主题名称" readonly />
      </el-form-item>
      <el-form-item label="QoS等级">
        <el-select v-model="publishForm.qos" placeholder="请选择QoS等级" style="width: 200px">
          <el-option label="QoS 0" value="0" />
          <el-option label="QoS 1" value="1" />
          <el-option label="QoS 2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="保留消息">
        <el-switch v-model="publishForm.retain" />
      </el-form-item>
      <el-form-item label="消息格式">
        <el-radio-group v-model="publishForm.messageFormat">
          <el-radio label="text">文本</el-radio>
          <el-radio label="json">JSON</el-radio>
          <el-radio label="hex">十六进制</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="消息内容">
        <el-input v-model="publishForm.message" type="textarea" :rows="8" placeholder="请输入消息内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handlePublish" :loading="publishing">发 布</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// Props
interface Props {
  publishDialog: {
    visible: boolean
  }
  publishForm: {
    topicName: string
    qos: string
    retain: boolean
    messageFormat: string
    message: string
  }
  publishing: boolean
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:publishDialog', 'update:publishForm', 'publish', 'cancel'])

// 处理发布
const handlePublish = () => {
  emit('publish')
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>